<template>
    <div class="box">
        <dragTreeTable :data="treeData" :onDrag="onTreeDataChange" border>
        </dragTreeTable>
    </div>
</template>

<script>
import dragTreeTable from '@/plugin/DragTreeTable/index.vue'
export default {
    components: { dragTreeTable },
    data () {
        return {
            treeData: {
                columns: [
                    {
                        type: 'selection',
                        title: '菜单名称',
                        field: 'name',
                        width: 200,
                        align: 'center',
                        formatter: (item) => {
                            return '' + item.name + ''
                        }
                    },
                    // {
                    //     type: 'checkbox',
                    //     title: '链接',
                    //     field: 'url',
                    //     width: 200,
                    //     align: 'center',
                    //     isContainChildren: true // 是否勾选子节点，默认false
                    // },
                    {
                        type: 'action',
                        title: '操作',
                        width: 350,
                        align: 'right',
                        actions: [
                            {
                                text: '查看角色',
                                onclick: (item) => {
                                    console.log(item)
                                },
                                formatter: (item) => {
                                    return '查看角色'
                                }
                            },
                            {
                                text: '编辑',
                                onclick: (item) => {
                                    console.log(item)
                                },
                                formatter: (item) => {
                                    return '编辑'
                                }
                            }]
                    }
                ],
                lists: [
                    {
                        'id': 40,
                        'parent_id': 0,
                        'order': 0,
                        'name': '动物类',
                        'uri': '/masd/ds',
                        'open': true,
                        'lists': []
                    },
                    {
                        'id': 41,
                        'parent_id': 0,
                        'order': 1,
                        'name': '植物类',
                        'uri': '/masd/ds',
                        'open': true,
                        'lists': []
                    },
                    {
                        'id': 5,
                        'parent_id': 0,
                        'order': 2,
                        'name': '昆虫类',
                        'uri': '/masd/ds',
                        'open': true,
                        'isShowCheckbox': false,
                        'lists': [
                            {
                                'id': 12,
                                'parent_id': 5,
                                'open': true,
                                'order': 0,
                                'name': '蚂蚁3',
                                'uri': '/masd/ds',
                                'lists': [
                                    {
                                        'id': 321,
                                        'parent_id': 5,
                                        'open': true,
                                        'order': 0,
                                        'name': '蚂蚁2',
                                        'uri': '/masd/ds',
                                        lists: [
                                            {
                                                'id': 123,
                                                'parent_id': 5,
                                                'open': true,
                                                'order': 0,
                                                'name': '蚂蚁1',
                                                'uri': '/masd/ds'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                'id': 21,
                                'parent_id': 3,
                                'open': true,
                                'order': 1,
                                'name': '蚯蚓',
                                'uri': '/masd/ds',
                                'lists': []
                            }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        // list:更新后的数据源
        // from: 当前被拖拽的行
        // to: 目标拖拽行
        // where: 拖拽的类型，top（上面）、center（里面）、bottom（下面）
        onTreeDataChange (list, from, to, where) {
            console.log(list)
            this.treeData.lists = list
        }
    }
}
</script>
<style lang='less' scoped>

</style>
